<template>
  <div  class="page-layout">
   <h1>图表组件</h1>
   <p>组件库封装echart 的vue 组件，自带父容器resize功能</p>
   
   <p>
    本库提供了 基础图表组件（dv-chart）以及 其他各类型图表组件，例如： <br/>
    dv-chart-bar (柱图)<br/>
    dv-chart-line (线图)<br/>
    dv-chart-pie (饼图) ......<br/>
    等。这些专属图表均以 基础图表组件(dv-chart) 进行拓展。
   </p>
 

   <h2>DvChart</h2>
   <p>dv-chart 组件 是 基础图表组件，其核心使用为传入 "options" 属性，"options"属性值为echart 的配置项</p>
    <textarea readonly style="width: 600px; height: 150px">
      <dv-chart :options="options" width="500px" height="300px"></dv-chart>
      options = {
        title: { text: 'ECharts 入门示例' },
        tooltip: {},
        legend: { data:['销量'] },
        xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] },
        yAxis: {},
        series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
      }
    </textarea>
   <p>dv-chart 组件 通常用于实现 最基础 及 最复杂 的图表（根据echart的使用方式）, 并且是其他特殊图表组件的基础</p>
   <h3>DvChart其他特性</h3>
   <ul>
    <li><strong>width / height</strong>： 设置图表宽高，支持百分百 和 px</li> 
    <li><strong>fit</strong>: 设置图表 自适应父容器高度 </li>
    <li><strong>theme</strong>: 'light' / 'dark' 图表组件默认自带两套主题 </li>
    <li><strong>debug</strong>: true / false: 设置true时，组件开启开发模式，将组件的echart配置打印到console中</li>
   </ul>

   <br/><br/><br/>

   <h2>DvChart拓展图表</h2>
   <p>
    组件库提供了诸如： <br/>
    dv-chart-bar (柱图)<br/>
    dv-chart-line (线图)<br/>
    dv-chart-pie (饼图) ......<br/>
    等 特色图表组件，均基于 dv-chart 拓展，内部已设定默认配置项，务求以最低成本实现图表需求。
   </p>
   <h3>特殊图表的传参：</h3>
   <p> 特殊图表的传参不需要使用 options， 而是通过 “data” / "settings" / "extend" 实现</p>
   <textarea readonly style="width: 800px; height: 100px">
    <dv-chart-bar :data="data"></dv-chart-bar>
    data = {
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330] ]
    }
  </textarea>
  <div style="margin: 20px; width: 80%;border: 5px solid red; padding: 20px">
    <div>
    <strong>data: </strong> 图表的数据结构，Object类型； 格式为 “{rows: [], columns: []}”
   </div>
   <div>
    <strong>settings: </strong> 特殊图表的专属配置，不同图表不同，见对应文档
   </div>
   <div style="color: red; font-size: 20px">
    <strong>extend: </strong> 图表的拓展配置，给组件补充 echart支持的其他配置项。
   </div>
   <p>以上三个特殊配置，最终会组装成 echart 支持的 options 配置作用于图表组件</p> 
  </div>
   
   
   <br/> 

   <h2>DvChart 结合 DvPage</h2>
    DvChart 自带默认主题颜色，当在 DvPage内使用时，会默认使用 DvPage 定义的图表主题色。
    <br/> <br/> 
   <h2>DvChart 通用参数</h2>
   <pre>
    // 宽度
    width: {
      type: String,
      default: 'auto'
    },

    // 高度
    height: {
      type: String,
      default: '400px'
    },

    // 适应父容器
    fit: Boolean, 

    // 优先使用 dv-page 全局主题
    usePageTheme: {
      type: Boolean,
      default: true
    },

    // 主题
    theme: {
      type: [String, Object],
      default() {
        return DEFAULT_THEME
      }
    },

    // 显示加载动画
    loading: Boolean,

    // 打印 options
    debug: {
      type: Boolean
    }, 
    
    // 地图名称
    map: String,

    // 地图geojson对象或构建函数，函数必须返回Promise
    register: [Object, Function],

    // 地图注册成功回调
    onRegister: Function,

    // 坐标集合 如：{'广州': [120.3234, 33.4329]}, 或 [{label:'广州',value: [120.3234, 33.4329]}]
    coords: {
      type: [Object, Array],
      default() {
        return {}
      }
    },
     
    // 忽略自定义extend（各类型图表内置特定拓展配置）
    ignoreSpecialExtend: {
      type: Boolean,
      default: false
    }

    // ECharts 配置选项
    options: {
      type: Object
    }, 

    // 图表数据 echarts dataset
    // 注：当Object时 结构为 {rows: [], columns: []}, 
    //     当Array时，结构为 [{rows: [], columns: []}, {rows: [], columns: []}] （用于地图）
    data: {
      type: [Object, Array],
      default() {
        return {}
      }
    },

    // 图表私有设置
    settings: {
      type: Object,
      default() {
        return {}
      }
    },

    // 扩展 options
    extend: [Object, Function],
   </pre>
  </div> 
    
</template>
<script setup lang="ts" >
// import {DvPage, DvBox} from '$comp/index';
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
 }
</style>